<template>
    <div class="table-page">
        <div class="table-search-box" @keyup.enter="search()">
            <div class="search-item">
                <label>评价类型：</label>
                <div class="table-query-input">
                    <el-select
                        v-model="queryData.type"
                        filterable
                        clearable
                        placeholder="类型"
                        class="address-select"
                    >
                        <el-option label="课程评价" value="course"></el-option>
                    </el-select>
                </div>
            </div>
            <div class="search-item">
                <label>审核状态：</label>
                <div class="table-query-input">
                    <el-select
                        v-model="queryData.status"
                        filterable
                        clearable
                        placeholder="状态"
                        class="address-select"
                    >
                        <el-option
                            label="未审核"
                            value="unReviewed"
                        ></el-option>
                        <el-option label="审核通过" value="pass"></el-option>
                        <el-option label="审核未通过" value="fail"></el-option>
                    </el-select>
                </div>
            </div>
            <div class="search-item">
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    :loading="tableLoading"
                    @click="clickSearch()"
                    >搜索
                </el-button>
            </div>
            <div class="search-item">
                <el-button
                    icon="el-icon-refresh"
                    :loading="tableLoading"
                    @click="resetSearch()"
                    >重置
                </el-button>
            </div>
        </div>
        <div class="table-operation-box">
            <el-button
                plain
                style="margin-bottom: 2em"
                type="success"
                :disabled="selectDisable"
                @click="changeFirstStatus(true)"
                >审核通过
            </el-button>
            <el-button
                plain
                style="margin-bottom: 2em"
                type="danger"
                :disabled="selectDisable"
                @click="changeFirstStatus(true)"
                >审核不通过
            </el-button>
            <el-button
                type="danger"
                plain
                style="margin-bottom: 2em"
                :disabled="selectDisable"
                @click="
                    tableDelete(
                        '/user/cu/evaluation/deleted-list',
                        {
                            ids: tableSelect
                        },
                        true
                    )
                "
                >批量删除
            </el-button>
        </div>
        <div class="table-data-box">
            <el-table
                ref="table"
                v-loading="tableLoading"
                :data="tableData"
                border
                style="width: 100%;min-height:40em"
                row-key="id"
                @selection-change="tableSelectionChange"
            >
                <el-table-column type="selection" width="55" align="center">
                </el-table-column>

                <el-table-column
                    prop="createdByName"
                    label="评价人"
                    width="120"
                ></el-table-column>
                <el-table-column prop="type" label="评价类型" width="120">
                    <template slot-scope="scope">
                        <k-tag
                            :tag="evaluationType[scope.row.type]"
                            :text="true"
                        ></k-tag>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="sourceName"
                    label="评价对象"
                    min-width="200"
                ></el-table-column>
                <el-table-column prop="rate" label="评价得分" min-width="200">
                    <template slot-scope="scope">
                        <el-rate
                            v-model="scope.row.rate"
                            disabled
                            show-score
                            text-color="#ff9900"
                        >
                        </el-rate>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="firstStatus"
                    label="审核状态"
                    width="120"
                >
                    <template slot-scope="scope">
                        <k-tag
                            :tag="evaluationStatus[scope.row.status]"
                            :text="true"
                        ></k-tag>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="createdTime"
                    label="创建时间"
                    width="180"
                >
                </el-table-column>
                <el-table-column
                    label="操作"
                    width="400"
                    align="center"
                    fixed="right"
                >
                    <template slot-scope="scope">
                        <el-button
                            v-if="!scope.row.edit"
                            type="primary"
                            size="mini"
                            :loading="scope.row.opLoading"
                            @click="clickSimpleEdit(scope.row, '详情')"
                            >详情
                        </el-button>
                        <el-button
                            v-if="scope.row.status === 'unReviewed'"
                            :loading="scope.row.opLoading"
                            type="success"
                            size="mini"
                            @click="changeFirstStatusSingle(scope.row.id, true)"
                            >审核通过
                        </el-button>
                        <el-button
                            v-if="scope.row.status === 'unReviewed'"
                            :loading="scope.row.opLoading"
                            type="warning"
                            size="mini"
                            @click="
                                changeFirstStatusSingle(scope.row.id, false)
                            "
                            >审核不通过
                        </el-button>
                        <el-button
                            v-if="!scope.row.edit"
                            type="danger"
                            icon="el-icon-delete"
                            size="mini"
                            :loading="scope.row.opLoading"
                            @click="
                                tableDelete(
                                    '/user/cu/Evaluation/delete',
                                    {
                                        id: scope.row.id
                                    },
                                    true
                                )
                            "
                            >删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div v-if="pageData.total" class="xy-between table-page-box">
            <el-pagination
                background
                :current-page.sync="pageData.currentPage"
                :page-sizes="pageData.pageSizes"
                :page-size.sync="pageData.pageSize"
                layout="total,  prev, pager, next, sizes, jumper"
                :total="pageData.total"
            >
            </el-pagination>
        </div>

        <el-dialog
            :title="dialogFormTitle"
            :visible.sync="dialogFormVisible"
            :before-close="dialogClose"
            width="60%"
        >
            <el-form
                ref="dataForm"
                :model="dataForm"
                label-width="8em"
                :rules="dataFormRule"
                class="table-edit-from border-form"
            >
                <el-form-item label="评价内容" prop="content">
                    <!--                    <tinymce  v-if="dialogFormVisible" v-model="dataForm.content" width="95%"/>-->
                    <el-input
                        v-model="dataForm.content"
                        type="textarea"
                        :rows="6"
                        style="width: 700px;max-width:50em"
                    ></el-input>
                </el-form-item>
            </el-form>
            <!--            <span slot="footer" class="dialog-footer">-->
            <!--                <el-button :loading="submitFlag" @click="dialogClose"-->
            <!--                >取 消</el-button-->
            <!--                >-->
            <!--                <el-button-->
            <!--                    :loading="submitFlag"-->
            <!--                    type="primary"-->
            <!--                    @click="-->
            <!--                        formDataSave('/user/cu/evaluation/update')-->
            <!--                    "-->
            <!--                >保 存</el-button-->
            <!--                >-->
            <!--            </span>-->
        </el-dialog>
    </div>
</template>

<script>
import { TablePage } from "@/layout/mixin/iVue.js";
import { mapState } from "vuex";
import { get, put, post } from "@/api/request";
import Tinymce from "@/components/Tinymce";

export default {
    name: "EvaluationList",
    components: { Tinymce },
    mixins: [TablePage],
    data() {
        return {
            queryData: {
                name: "",
                orders: [
                    {
                        column: "status",
                        asc: true
                    },
                    {
                        column: "created_time",
                        asc: false
                    }
                ]
            }
        };
    },
    computed: {
        ...mapState({
            evaluationStatus: state => state.status.evaluationStatus,
            evaluationType: state => state.status.evaluationType
        })
    },
    watch: {},
    created() {},
    mounted() {},
    methods: {
        search(queryData) {
            this.loadTable("/user/cu/evaluation/page", queryData);
        },
        getCheckStatus(row) {
            console.log("row", row);
            if (row.firstStatus === "unReviewed") {
                return "一审中";
            }
            if (row.firstStatus === "fail") {
                return "一审失败";
            }
            if (row.firstStatus === "pass" && row.responseBy === null) {
                return "一审通过待回复";
            }
            if (
                row.firstStatus === "pass" &&
                row.responseBy !== null &&
                row.secondStatus === "unReviewed"
            ) {
                return "二审中";
            }
            if (row.secondStatus === "pass") {
                return "二审通过";
            }
            if (row.secondStatus === "fail") {
                return "二审失败";
            }
        },
        async changeFirstStatus(status) {
            if (!status) {
                await this.$confirm("确定审核失败这些评价吗？", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                });
            }
            post(`/user/cu/evaluation/first/${status}`, {
                ids: this.tableSelect
            })
                .then(res => {
                    this.search();
                })
                .finally(() => {
                    this.tableLoading = false;
                });
        },
        async changeSecondStatus(status) {
            if (!status) {
                await this.$confirm("确定审核失败这些评价吗？", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                });
            }
            post(`/user/cu/evaluation/second/${status}`, {
                ids: this.tableSelect
            })
                .then(res => {
                    this.search();
                })
                .finally(() => {
                    this.tableLoading = false;
                });
        },
        async changeFirstStatusSingle(id, status) {
            if (!status) {
                await this.$confirm("确定审核失败这些评价吗？", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                });
            }
            post(`/user/cu/evaluation/first/${status}`, { ids: id })
                .then(res => {
                    this.search();
                })
                .finally(() => {
                    this.tableLoading = false;
                });
        },
        async changeSecondStatusSingle(id, status) {
            if (!status) {
                await this.$confirm("确定审核失败这些评价吗？", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                });
            }
            post(`/user/cu/evaluation/second/${status}`, { ids: id })
                .then(res => {
                    this.search();
                })
                .finally(() => {
                    this.tableLoading = false;
                });
        }
    }
};
</script>

<style lang="scss" scoped>
.school-logo {
    .logo-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 108px;
        height: 108px;
        line-height: 108px;
        text-align: center;
    }

    .logo-img {
        width: 108px;
        height: 108px;
        display: block;
    }
}

.table-edit-from {
    .address-select {
        width: 8em;
        margin-right: 2em;
    }
}
</style>
<style>
.school-logo .logo-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.school-logo .logo-uploader .el-upload:hover {
    border-color: #409eff;
}
</style>
